<!--
 * @Author: your name
 * @Date: 2020-12-11 10:14:24
 * @LastEditTime: 2021-01-04 15:27:15
 * @LastEditors: GabbyMrH
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admind:\lsh_web\uniapp-ts-uview\src\pages\index\components\search.vue
-->
<template>
  <view class="header_ser">
    <view class="action_sel">
      <picker :value="cityIndex" :range="arrayCity" @change="bindPickerChange">
        <text>{{ arrayCity[cityIndex] }}</text>
      </picker>
      <u-icon name="arrow-down-fill" size="18" class="u_icon"></u-icon>
    </view>
    <u-search
      :clearabled="true"
      placeholder="请搜索关键字"
      :show-action="showaction"
      class="u_search"
      height="60"
    ></u-search>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop,Emit} from "vue-property-decorator";
@Component({name:'search'})
export default class extends Vue {
  @Prop() private cityIndex!: number;
  @Prop({ default: () => ["深圳市"] }) private arrayCity!: string[];
  @Prop({ default: true }) private showaction!: boolean;
  
  @Emit('bindPickerChange')
  private  bindPickerChange(e:any){
    
    return e.detail.value as Number
  }

}
</script>

<style lang="scss" scoped>
.header_ser {
  width: 100%;
  height: 88upx;
  display: flex;
  justify-content: flex-start;
  background: #ffffff;
  .action_sel {
    width: auto;
    height: 100%;
    font-size: 28upx;
    padding-left: 29upx;
    line-height: 70upx;

    display: flex;
    justify-content: flex-start;
    .u_icon {
        margin-left: 10upx;
        margin-top:-20upx
    }
  }

  .u_search {
    width: 580upx;
  }
}
</style>